<template>
	<view class="couponForm-box">
		<u-form :model="allCouponForm" ref="allCouponFormRef" :rules="newCouponFormRules" labelWidth='100'
			class="couponForm">
			<u-form-item label="" prop="newCouponForm.name">
				<text class="rangeLabel">优惠券名称</text>
				<u-input v-model="allCouponForm.newCouponForm.name" border="none" placeholder="请输入优惠券名称" />
			</u-form-item>

			<u-form-item label="" prop="datetimerange">
				<text class="rangeLabel">使用有效期</text>
				<uni-datetime-picker v-model="allCouponForm.datetimerange" start-placeholder="有效开始日期"
					end-placeholder="有效结束日期" @change='getCouponDate' :border="false" type="datetimerange"
					rangeSeparator="-" />
			</u-form-item>

			<u-form-item label="" prop="">
				<text class="rangeLabel">优惠券类型</text>
				<u-radio-group v-model="allCouponForm.newCouponForm.ctype">
					<u-radio activeColor="#ff4110" labelSize="14" size="14"
						:labelColor="allCouponForm.newCouponForm.ctype==item?'#ff4110':''"
						v-for="(item, index) in ctypeColumns" :key="index" :label="item" :name="item"
						@change="getCouponModeEvent">
					</u-radio>
				</u-radio-group>
			</u-form-item>

			<u-form-item label="" prop="couponMode">
				<text class="rangeLabel">优惠券方式</text>
				<u-radio-group v-model="couponMode">
					<u-radio activeColor="#ff4110" labelSize="14" size="14"
						:labelColor="couponMode==item.value?'#ff4110':''" v-for="(item, index) in couponModeList"
						:key="index" :label="item.label" :name="item.value" @change="getCouponModeEvent">
					</u-radio>
				</u-radio-group>
			</u-form-item>

			<u-form-item label="" prop="couponParValue">
				<text class="rangeLabel">优惠券面值</text>
				<u-input v-model.number="allCouponForm.couponParValue" placeholder="请输入优惠券面值" type="number"
					border="none" clearable @change="getParValueEvent"></u-input>
			</u-form-item>

			<!-- 油币抵扣，油品券 -->
			<u-form-item prop="">
				<text class="rangeLabel">参与范围</text>
				<u-checkbox-group v-model="couponRange" @change="getCouponRangeEvent">
					<u-checkbox activeColor="#ff4110" labelSize="14" size="14"
						:labelColor="couponRange.includes(item.value)?'#ff4110':''"
						v-for="(item, index) in couponRangeList" :key="index" :label="item.label" :name="item.value">
					</u-checkbox>
				</u-checkbox-group>
			</u-form-item>

			<u-form-item label="" prop="">
				<text class="rangeLabel">油站信息</text>
				<u--textarea v-model="allCouponForm.newCouponForm.companyId" placeholder="油站信息"></u--textarea>
			</u-form-item>

			<u-button type="primary" text="发布" class="publishBtn" @click="publishCouponEvent"></u-button>
		</u-form>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref
	} from 'vue';

	// 优惠券表单
	const allCouponForm = reactive({
		couponParValue: null,
		datetimerange: [],
		newCouponForm: {
			name: null,
			ctype: '加油站', // 优惠劵类型
			startTime: null,
			endTime: null,
			audit: 0, // 0表示未审核
			cardDisc: null, // 优惠折扣
			fullAmount: null, // 满减金额
			isoli: 0, // 油品券
			isDeduction: 0, // 油币抵扣
			companyId: null // 油站信息
		}
	})

	// 表单验证
	const newCouponFormRules = reactive({
		'newCouponForm.name': {
			type: 'string',
			required: true,
			message: '请输入优惠券名称',
			trigger: ['blur']
		},
		'datetimerange': {
			type: 'array',
			required: true,
			message: '请选择优惠券有效期',
			trigger: ['change'],
		},
		'couponParValue': [{
				type: 'number',
				required: true,
				message: '请输入优惠额度',
				trigger: ['blur']
			},
			{
				validator: (rule, value, callback) => {
					if (couponMode.value == 'cardDisc') {
						if (value >= 10 || value <= 0) {
							return callback(new Error('折扣优惠券面值必须大于零 小于10'));
						}
					} else {
						if (value <= 0) {
							return callback(new Error('满减优惠券面值必须大于零'));
						}
					}
					callback();
				},
				trigger: ['blur']
			}
		]
	})

	// 表单引用  
	const allCouponFormRef = ref(null)

	// 优惠券方式
	const couponMode = ref('cardDisc')
	const couponModeList = ref([{
			value: 'cardDisc',
			label: '优惠折扣'
		},
		{
			value: 'fullAmount',
			label: '满减金额'
		}
	])

	// 优惠券参与范围
	const couponRange = ref([])
	const couponRangeList = ref([{
			value: 'isoli',
			label: '油品券'
		},
		{
			value: 'isDeduction',
			label: '油币抵扣'
		}
	])

	// 优惠券类型
	const ctypeColumns = ref(['加油站', '商城'])

	/**
	 * 获取优惠方式
	 * @_modeval
	 */
	const getCouponModeEvent = (_modeval) => {
		allCouponForm.couponParValue = null
		allCouponForm.newCouponForm.cardDisc = null
		allCouponForm.newCouponForm.fullAmount = null
	}

	/**
	 * 获取优惠券参与范围
	 * @_rangVal
	 */
	const getCouponRangeEvent = (_rangVal) => {
		console.log('_rangVal', _rangVal);
	}

	/**
	 * 获取有效时间
	 * @_dateVal
	 */
	const getCouponDate = (_dateVal) => {
		allCouponForm.newCouponForm.startTime = _dateVal[0]
		allCouponForm.newCouponForm.endTime = _dateVal[1]
		allCouponFormRef.value.validateField('datetimerange');
	}

	/**
	 * 获取优惠面值
	 * @_parVal
	 */
	const getParValueEvent = (_parVal) => {
		if (couponMode.value == 'cardDisc') { // 优惠折扣
			allCouponForm.newCouponForm.cardDisc = _parVal
		} else {
			allCouponForm.newCouponForm.fullAmount = _parVal
		}
	}

	/**
	 * 发布优惠券
	 */
	const publishCouponEvent = () => {
		console.log('信息', allCouponForm);
		allCouponFormRef.value.validate().then(valid => {
			if (!valid) return uni.$u.toast('校验失败')

			// TODO 接口
			uni.$u.toast('发布成功')

			uni.navigateTo({
				url: '/pages/merchant_center/coupon_manage/index'
			})
			resetForm()

		}).catch((err) => {
			console.log(err);
			// 处理验证错误  
			uni.$u.toast('校验失败')
		});
	}

	/**
	 * 重置
	 */
	const resetForm = () => {
		allCouponFormRef.value.resetFields()
	}
</script>

<style lang="scss">
	.couponForm-box {
		height: 88vh;
		padding: 30rpx;
		background-color: #f3f3f3;

		.couponForm {
			padding: 20rpx 20rpx 150rpx 20rpx;
			border-radius: 20rpx;
			background-color: #ffffff;
			box-shadow: 0px 0px 10rpx #e3e3e3;

			.rangeLabel {
				box-sizing: border-box;
				width: 180rpx;
				padding-left: 10rpx;
				border-left: 5rpx solid $u-primary;
				font-size: 28rpx;
			}
		}

		:deep(.u-form-item__body__left__content__label) {
			font-size: 28rpx;
		}

		// 时间选择
		:deep(.uni-date-x) {
			height: 48rpx;
		}

		:deep(.uni-date__x-input) {
			height: 48rpx;
			padding-left: 0;
			line-height: 48rpx;
			font-size: 25rpx;
		}

		:deep(.uni-date-x .icon-calendar) {
			padding-left: 0;
			color: $u-primary !important;
			font-size: 38rpx !important;
		}

		// 表单项
		:deep(.u-form-item) {
			margin-top: 20rpx;
			height: 90rpx;
			// border-bottom: 2rpx solid #d6d6d6;
		}

		:deep(.u-form-item__body) {
			padding: 0;
		}

		// 占位符
		:deep(.uni-input-placeholder) {
			font-size: 25rpx;
			padding-left: 20rpx;
		}

		// 单选多选按钮
		:deep(.u-radio) {
			margin-right: 30rpx;

		}

		:deep(.u-checkbox) {
			margin-right: 30rpx;
		}

		:deep(.uni-calendar-item--multiple .uni-calendar-item--before-checked) {
			background-color: $u-primary
		}

		:deep(.uni-calendar-item--multiple .uni-calendar-item--after-checked) {
			background-color: $u-primary
		}

		:deep(.uni-calendar-item__weeks-box .uni-calendar-item--checked) {
			background-color: $u-primary
		}

		:deep(.uni-datetime-picker--btn) {
			background-color: $u-primary
		}

		:deep(.uni-date-changed--time-date) {
			color: #000;
		}

		.publishBtn {
			position: absolute;
			bottom: 50rpx;
			left: 0;
			right: 0;
			margin: auto;
			width: 600rpx;
		}
	}
</style>